<!-- 热门景点-->
<!-- 制作卡片-->

<template>

  <div class="rows_curr">
    <div id="title"><h1>热门景点</h1></div>
    <el-divider/>
    <el-row id="card_body" v-for="(items, index) in hot">
      <el-col :span="8"
              v-for="item in items"
              class="wow animate__animated animate__fadeInLeft"
              :class="item.css"
      >
        <!--              :style="index === 2? '':'', ''">-->
        <el-card
            :body-style="{ padding: '0px' }"
            class="card_curr"
            shadow="hover"
            @click="advertising(item.link)">
          <el-image alt="1" class="mage" :src='item.src'></el-image>
<!--          <el-image alt="1" class="mage" :src='item.src'></el-image>-->
          <div class="content_curr">
            <p>{{ item.name }}</p>
            <span>
                  <i>￥</i>
                  <em>{{ item.price }}</em>
                    起
                </span>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
  <!--  热门城市-->
  <div class="right_curr" :style="{boxShadow: `var(--el-box-shadow-light)`}">
    <div id="hot_city">
      <p style="margin-bottom: 10px">热门城市</p>
      <el-row
          :gutter="10"
          v-for="items in hotCity"
          style="margin-left: 10px; margin-right: 10px; margin-top: 0; width: 280px">
        <el-col :span="6" v-for="item in items" style="text-align: center">
          <el-link :underline="false" :href="item.link" target="_blank">{{item.name}}</el-link>
        </el-col>
      </el-row>
    </div>
    <div id="activity">
      <p id="title_activity">主题活动</p>
      <el-row style="text-align: center; margin: 10px 0 10px 0">
        <el-col >
          <div id="sub_content">
            <el-avatar :size="75" src="" @error="true">
              <img src="../../assets/images-jingdian/hot1.png" alt="error"/>
            </el-avatar>
            <p id="sub_title">
              游迪士尼
              <span>
                约会白雪公主
              </span>
            </p>
          </div>
        </el-col>

      </el-row>
    </div>
  </div>


</template>

<script>
import image1 from '../../assets/images-jingdian/1.webp'
import image2 from '../../assets/images-jingdian/2.webp'
import image3 from '../../assets/images-jingdian/3.webp'
import image4 from '../../assets/images-jingdian/4.webp'
import image5 from '../../assets/images-jingdian/5.jpg'
import image6 from '../../assets/images-jingdian/6.jpg'
import image7 from '../../assets/images-jingdian/7.jpg'
import image8 from '../../assets/images-jingdian/8.webp'
import image9 from '../../assets/images-jingdian/9.webp'
import {reactive, useCssModule, onMounted, inject} from 'vue'
// import {WOW} from 'wowjs'
// import 'wowjs'
import {TencentQq} from '@icon-park/vue-next'

export default {
  name: "Popular",
  components: {
    TencentQq
  },
  setup() {
    const style = useCssModule()

    const hotCity = [
      [
        {
          name: '玉林',
          link: 'https://www.ly.com/scenery/scenerysearchlist_7_111__0_0_0_0_0_0_0.html#Resys=379_r5mvHO_LB_6_1_1'
        },
        {
          name: '贵港',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=103#Resys=414_H8yLuH_LB_1_1_1'
        },
        {
          name: '梧州',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=110#Resys=414_H8yLuH_LB_1_3_3'
        },
        {
          name: '茂名',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=85#Resys=414_H8yLuH_LB_1_2_2'
        },
      ],
      [
        {
          name: '来宾',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=106#Resys=414_H8yLuH_LB_1_4_4'
        },
        {
          name: '湛江',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=94#Resys=414_H8yLuH_LB_1_5_5'
        },
        {
          name: '北海',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=99#Resys=414_H8yLuH_LB_1_6_6'
        },
        {
          name: '钦州',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=109#Resys=414_H8yLuH_LB_1_7_7'
        },
      ],
      [
        {
          name: '南宁',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=108#Resys=414_H8yLuH_LB_1_8_8'
        },
        {
          name: '云浮',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=93#Resys=414_H8yLuH_LB_1_9_9'
        },
        {
          name: '柳州',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=107#Resys=414_H8yLuH_LB_1_10_10'
        },
        {
          name: '阳江',
          link: 'https://www.ly.com/bustour/bustoursearchlist_0_0_111_0_0_0_0_0.html?endcityids=92#Resys=414_H8yLuH_LB_1_11_11'
        },
      ],
        [
          {
            name: '潍坊',
            link: 'https://www.ly.com/scenery/scenerysearchlist_22_296__0_0_0_0_0_0_0.html#Resys=379_8GmfrH_LB_6_13_13'
          },
          {
            name: '唐山',
            link: 'https://www.ly.com/scenery/scenerysearchlist_10_147__0_0_0_0_0_0_0.html#Resys=379_8GmfrH_LB_6_3_3'
          },
          {
            name: '邯郸',
            link: 'https://www.ly.com/scenery/scenerysearchlist_10_142__0_0_0_0_0_0_0.html#Resys=379_8GmfrH_LB_6_14_14'
          },
        ]
    ]

    const hot = [
      [
        {
          src: image1,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_1368.html#Resys=355_P4KmzP_LB_3_1_1',
          name: '盘门',
          price: '16',
          css: style.c
        },
        {
          src: image2,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_216168.html#Resys=355_P4KmzP_LB_3_2_2',
          price: '35',
          name: '苏州狮子林 ',
          css: style.b
        },
        {
          src: image3,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_11075.html#Resys=355_P4KmzP_LB_3_3_3',
          price: '15',
          name: '白马涧龙池景区',
          css: style.a
        },
      ],
      [
        {
          src:  image4,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_19240.html#Resys=355_P4KmzP_LB_3_4_4',
          price: '18',
          name: '重元寺',
          css: style.f
        },
        {
          src: image5,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_180686.html#Resys=355_P4KmzP_LB_3_5_5',
          price: '15',
          name: '虎丘山风景名胜区',
          css: style.e
        },
        {
          src: image6,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_1365.html#Resys=355_P4KmzP_LB_3_6_6',
          price: '25',
          name: '留园',
          css: style.d
        },
      ],
      [
        {
          src: image7,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_1387.html#Resys=355_P4KmzP_LB_3_7_7',
          price: '14',
          name: '沙家浜风景区',
          css: style.i
        },
        {
          src: image8,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_6042.html#Resys=355_P4KmzP_LB_3_8_8',
          price: '68',
          name: '网师园',
          css: style.h
        },
        {
          src: image9,
          link: 'https://www.ly.com/scenery/BookSceneryTicket_509261.html#Resys=355_00KeHC_LB_3_1_1',
          price: '55',
          name: '五彩田园农业嘉年华',
          css: style.g
        },
      ]
    ]

    const handleStyle = (index) => {
      if (index === 2) return {'--animate-delay': '0.9s'}
      if (index === 3) return {'--animate-delay': '1.8s'}
    }

    // 广告
    function advertising(link) {
      window.open(link)
    }

    // onMounted(() => {
    //   const wow = inject('wow')
    //   wow.init()
    //   console.log(wow)
    //   const wow = new WOW({
    //     live: false
    //   })
    //   console.log(wow)
    //   new WOW({
    //     live: false // 当时为了解决警告问题 想查看所有属性可去官网了解  https://wowjs.uk/docs.html
    //   }).init();
    // })
    return {
      hot,
      style,
      hotCity,
      // WOW,
      handleStyle,
      advertising
    }
  }
}
</script>

<!--<style scoped>-->
<style scoped>
.card_curr {
  width: 242px;
  height: 200px;
  /*margin-left: 5px;*/
}

.card_curr p {
  float: left;
  position: relative;
  left: 10px;
}

.rows_curr {
  margin-right: 20px;
  height: 90%;
  width: 800px;
}

.right_curr {
  margin-left: 20px;
  margin-top: 130px;
  height: 80%;
  width: 300px;
  border-top: 1px solid blueviolet;
}

#title {

  padding-left: 20px;
  margin-bottom: 10px;
  text-align: left;
}

h1 {
  font-family: "仓耳渔阳体 W04", serif;
}

#card_body {
  font-family: '微软雅黑', Arial, sans-serif;
  width: 800px;
  margin-bottom: 20px;
}

.image {
  width: 242px;
  height: 150px;
}

.content_curr {
  padding: 8px 10px 0 10px;
}

.content_curr span {
  float: right;
}

.content_curr span em {
  color: #ff685d;
  font-size: 20px;
  font-family: Arial, serif;
  margin-right: 2px;
}

.content_curr span i {
  color: #ff685d;
  font-size: 16px;
}

#hot_city {
  width: 100%;
  height: 40%;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
}

#hot_city p {
  font-family: alimama,serif ;
  text-align: left;
  margin: 9px 0 10px 25px;
  font-size: 18px;
}

#activity {

}

#title_activity {
  text-align: left;
  margin: 9px 0 20px 25px;
  font-size: 18px;
  font-family: alimama,serif ;
}

#sub_content {
  display: flex;
  flex-flow: row;
  justify-content: center;
}
#sub_title {
  height: 60px;
  color: #333;
  font-size: 16px;
  line-height: 26px;
  display: table-cell;
  vertical-align: middle;
  margin: 9px 0 20px 15px;
}

#sub_title span {
  color: #999;
  font-size: 12px;
  display: block;
  line-height: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}


</style>


<style module>
.a {
  --animate-duration: 0.5s;
}

.b {
  --animate-duration: 0.8s;
}

.c {
  --animate-duration: 1.1s;
  /*--animate-duration: 5s;*/
}

.d {
  --animate-duration: 1.4s;
}

.e {
  --animate-duration: 1.7s;
}

.f {
  --animate-duration: 2.0s;
}

.g {
  --animate-duration: 2.3s;
}

.h {
  --animate-duration: 2.6s;
}

.i {
  --animate-duration: 2.9s;
}
</style>